<template>
  <view class="PendingOrder">
    <navBar><template #head>正在挂单</template></navBar>
    <view class='secureCase'>
      <view class="purchaseKoiNum">
        <view class="title">
          <view class="h3">收购KOI</view>
          <view class="color">交易完成</view>
        </view>
        <view class="content">
          <view class="left">
            <view>1.102<text>USDT</text></view>
            <view class="small">
              KOI收购单价
            </view>
          </view>
          <view class="right">
            <view>KOI收购总数：100</view>
            <view>KOI已收购：80</view>
            <view>USDT已支出：81.3021USDT</view>
          </view>
        </view>
        <van-progress :percentage="percentage" :show-pivot='false' track-color='#545557' stroke-width='4px' />
      </view>
      <view class="pending">
        <text>挂单编号</text>
        <view class="orderNum" @click="copy(orderNum)">
          {{orderNum}}
          <image src="/src/static/images/Order/order_copy.png" mode=""></image>
        </view>
      </view>
      <view class="orderList">
        <view class="title">订单列表</view>
        <view class="item" v-for="item in orderList" :key="item.id" @click="inPro(item)">
          <view class="topTitle">
            <view class="h3">{{item.toCoin==='KOI'?'收购KOI':'出售KOI'}}</view>
            <view class="color">{{!item.status?'交易完成':'交易完成'}}</view>
          </view>
          <view class="content">
            <view>
              <text>{{item.amount}}</text>
              <view class='small'>KOI收购数量</view>
            </view>
            <view class="borderLeft"></view>
            <view>
              <text>{{item.usdtAmount}}</text>
              <view class='small'>USDT支出数量</view>
            </view>
          </view>
          <view class="date">
            {{item.createTime}}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import navBar from '@/components/navBar/index.vue'
  import { copy } from '@/utils/copy'
  import { QueryOrderList } from '@/api/PendingOrderList'
  import { onLoad } from '@dcloudio/uni-app';

  const percentage = ref(60);

  const orderNum = ref("hf9iwbonjcvh094f3r");

  const orderList = ref([
    {
      id: 1,
      state: "收购KOI",
      purchaseState: "交易完成",
      purchaseNum: "10000",
      disburse: "10313",
      date: "2023年10月15日 00:33:06",
    },
    {
      id: 2,
      state: "收购KOI",
      purchaseState: "交易完成",
      purchaseNum: "10000",
      disburse: "10313",
      date: "2023年10月15日 00:33:06",
    },
  ]);

  const QueryOrder = async () => {
    const data = await QueryOrderList({ status: "1" })
    console.log(data)
    orderList.value = data.rows
  }

  function inPro (id: object) {
    uni.navigateTo({
      url: '/homeSub/PendingOrderPro/index?id=' + JSON.stringify(id)
    })
  }

  onLoad(() => {
    QueryOrder()
  })
</script>

<style lang="scss" scoped>
  .PendingOrder {
    min-height: 100vh;


    .secureCase {
      padding-top: 0 !important;
    }

    .purchaseKoiNum {
      height: 280px;
      padding: 32px;
      background: #2a2b2e;
      border-radius: 16px;
      box-sizing: border-box;
      color: #ffffff;

      .title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .h3 {
          font-size: 32px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          line-height: 40px;
        }

        .color {
          font-size: 24px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #f8444d;
          line-height: 33px;
        }
      }
    }

    .content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 24px;
      margin-bottom: 20px;
      font-size: 40px;
      font-family: PingFangSC, PingFang SC;
      color: #ffffff;
      line-height: 36px;

      .left {
        uni-text {
          font-size: 24px;
        }

        .small {
          font-size: 24px;
          line-height: 33px;
        }
      }

      .right {
        font-size: 24px;
      }
    }

    ::v-deep.van-progress__portion {
      background: linear-gradient(151deg, #4e47ff 0%, #06ffdd 100%);
    }

    .pending {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 80px;
      margin-top: 32px;
      padding: 0 32px;
      background: #2a2b2e;
      border-radius: 16px;
      font-size: 24px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #ffffff;
      line-height: 80px;
      box-sizing: border-box;

      .orderNum {
        display: flex;
        align-items: center;
        height: 80px;
        font-size: 24px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #7f7f81;
        line-height: 80px;
      }

      image {
        width: 30px;
        height: 30px;
        margin-left: 8px;
      }
    }

    .orderList {
      .title {
        height: 50px;
        margin: 64px 0 40px;
        font-size: 36px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        line-height: 50px;
        letter-spacing: 1px;
      }

      .item {
        padding: 32px;
        height: 278px;
        margin-bottom: 24px;
        background: #2a2b2e;
        border-radius: 16px;
        box-sizing: border-box;
        color: white;
        text-align: center;

        .topTitle {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .h3 {
            font-size: 28px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            line-height: 40px;
          }

          .color {
            font-size: 24px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #f8444d;
            line-height: 33px;
          }
        }

        .content {
          padding: 0 74px;
          box-sizing: border-box;

          uni-text {
            height: 56px;
            font-size: 40px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 56px;
            letter-spacing: 1px;
          }

          .small {
            height: 33px;
            font-size: 24px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 33px;
          }

          .borderLeft {
            width: 1px;
            height: 70px;
            background-color: rgba(255, 255, 255, 0.2);
          }
        }

        .date {
          height: 29px;
          margin-top: 24px;
          font-size: 24px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #737375;
          line-height: 33px;
        }
      }
    }
  }
</style>